<template>
    <div ref="myChart" id="myChart"></div>
</template>
<script>
import * as echarts from "echarts";
export default {
    data() {
        return {
            kdata: [
                [20, 34, 10, 38],
                [40, 35, 30, 50],
                [31, 38, 33, 44],
                [38, 15, 5, 42],
            ],
        };
    },
    computed: {
        newData() {
            return this.kdata.map(v => v[0])
        }
    },
    mounted() {
        let myChart = echarts.init(this.$refs.myChart);
        let option = {
            xAxis: {
                data: ["日化", "蔬菜", "电器", "美妆"],
            },
            yAxis: {},
            tooltip: {
                //设置提示框
                trigger: "axis",
                axisPointer: {
                    type: "cross",
                },
            },
            series: [
                {
                    type: "candlestick", //k线图

                    itemStyle: {
                        color: "red", //上涨的颜色
                        color0: "black", //下跌的颜色
                        borderColor: "blue", //上涨的边框色
                        borderColor0: "orange", //下跌的边框色
                    },
                    data: this.kdata,
                    markPoint: {
                        data: [
                            {
                                name: "最大值",
                                type: "max",
                                valueDim: "highest", //valueDim指定是在哪个维度的最大值，最小值，平均值
                            },
                            {
                                name: "最小值",
                                type: "min",
                                valueDim: "lowest",
                            },
                            {
                                name: "平均值",
                                type: "average",
                                valueDim: "close",
                            },
                        ],
                    },
                },
                {
                    type: 'line',
                    smooth: true,
                    data: this.newData
                }
            ],
        };
        myChart.setOption(option);
    },
};
</script>
<style scoped>
#myChart {
    border: 1px solid red;
    width: 500px;
    height: 500px;
}
</style>
